<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增加用户</title>
		<!--引入bootstrap-->
		<script src="../bootstrap-4.6.0-dist/js/bootstrap.js"></script>

		<link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
		<!--引入jquery-->
		<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
		<!--引入layui-->
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
	<div class="layui-fluid" style="margin-top: 25px">
		<div class="layui-col-md4 layui-col-md-offset4">
			<form class="layui-form layui-form-pane" action="" id="userAddForm">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" required  lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码框</label>
					<div class="layui-input-block">
						<input type="password" name="password" required lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>

				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="text" name="email" required  lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">选择框</label>
					<div class="layui-input-block">
						<select name="roleName" lay-verify="required">
							<option value="普通用户">普通用户</option>
							<option value="管理员">管理员</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="userAddSubmit">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>
		<script>
			layui.use('form', function(){
				var form = layui.form;
				//监听提交
				form.on('submit(userAddSubmit)', function(data){
					$.ajax({
						url:"http://localhost:8080/user/add",
						type:"post",
						data:$("#userAddForm").serialize(),
						success:function (data) {
                           layer.msg(data.msg);
						},
						error:function (data) {
							layer.msg(data.msg);
						}
					});
					return false;
				});
				//自定义表单验证
				form.verify({
					username: [ /^(?![^a-zA-Z]+$)(?!\D+$).{6,12}$/
						,'帐号必须6~12位，包含字母和数字'],
					password: [/^(?![^a-zA-Z]+$)(?!\D+$).{6,12}$/
						,'密码必须至少6~12位，包含字母和数字']
				})
			});
		</script>

	</body>
</html>
